<template>
    <el-card style="width: 100%;border-radius: 15px;" shadow="always">
        <div class="tableBox">
            <div class="tableTop">
                设备名称
                &nbsp;
                <el-input v-model="form.productName" style="width: 240px" placeholder="请输入设备名称" clearable />
                &nbsp;
                &nbsp;
                时间范围
                &nbsp;
                <el-date-picker style="width: 300px;" v-model="form.time" type="daterange" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                    size="mini" />
                &nbsp;
                &nbsp;
                <el-button type="primary" size="mini" class="button" color="#36f">查询</el-button>
            </div>
            <el-table :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }" :data="tableData" border
                class="table">
                <el-table-column prop="FaultName" label="故障名称">
                </el-table-column>
                <el-table-column prop="FaultNr" label="故障内容">
                </el-table-column>
                <el-table-column prop="FaultTime" label="时间">
                </el-table-column>
                <template v-slot:empty>
                    <el-empty description="暂无数据" />
                </template>
            </el-table>
            <el-pagination style="margin-bottom: 20px;" page-size="50" @current-change="handlePageChange" background
                layout="prev, pager, next" :total="count" />
        </div>
    </el-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { selectTableEquipmentMachineAll } from '@/api'
import { Alex } from '@/types';
import { ElMessage, ElMessageBox } from 'element-plus';
const page = ref(1)
const count = ref(0)
const form = ref({
    productName: null,
    time: []
})
const tableData = ref([
    {
        FaultName: 'AGV设备断电',
        FaultNr: '电源未接通',
        FaultTime: '2024-08-27 14:30:20'
    }
]);
onMounted(() => {
    // selectTableEquipmentMachineAll(alex).then((res: any) => {
    //     tableData.value = res.result.list
    // })
})
const alex = new Alex
const handlePageChange = (val: any) => {
    page.value = val;

}

</script>
<style scoped>
.table {
    height: 70vh;
    margin: 0px auto 20px auto;
    width: 98%;
}

span {
    cursor: pointer;
}

:deep(.el-card__body) {
    padding: 0;
}

/* :deep(.el-input__wrapper) {
    background-color: #252547;
    border-color: #13132b;
    color: #fff;
    box-shadow: none;
}
*/
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
    background: #36f;
}

.tableBox {
    box-shadow: 0 0 transparent, 0 0 transparent, 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
    border: 1px solid #e9e9eb;
    background-color: #ffffff;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tableTop {
    width: 100%;
    margin-bottom: 20px;
    padding: 1.2rem;
    height: 32px;
    color: #323639;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid #e9e9eb;
}

.box {
    /* width: 1600px; */
    display: flex;
    height: 80vh;
    margin: 0 auto;
}

/* 
:deep(.el-table) {
    font-size: 12px;
    --el-table-border-color: #2e6099;
    border-radius: 4px;
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #2e6099;
}

:deep(.el-table--fit) {
    backdrop-filter: blur(1px);
    background-color: #222b45;
}

:deep(.el-table thead.is-group th.el-table__cell) {
    color: black;
    color: white;
    backdrop-filter: blur(1px);
    font-weight: bold;
}

:deep(.el-table th.el-table__cell) {
    backdrop-filter: blur(1px);
    background-color: #222b45;
}

:deep(.el-table thead.is-group th.el-table__cell:hover) {
    color: black;
}

:deep(.el-table tr) {
    background-color: #ffffff00;
    color: white;
}

:deep(.el-table tr:hover) {
    background-color: #222b45;
}

:deep(.el-table td:hover) {
    background-color: #222b45;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
    background-color: #323e61 !important;
} */
</style>